<template>
  <a-modal
    :title="formInfo.id==undefined?'新增':'修改'"
    :width="1200"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :destroyOnClose="true"
    @ok="handleSubmit"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form-model
        ref="ruleForm"
        :model="formInfo"
        :label-col="$global.labelCol"
        :wrapper-col="$global.wrapperCol"
      >
            <a-row>
              <a-col :span="12">
            <a-form-model-item label="套餐名称" prop="packageName" :rules="$valid.required" :maxLength="50">
              <a-input v-model="formInfo.packageName" placeholder="请输入标题"/>
            </a-form-model-item>
          </a-col>
                <a-col :span="12">
                    <a-form-model-item label="套餐类型" prop="packType" :rules="$valid.required" :maxLength="50">
                        <a-select v-model="formInfo.packType" placeholder="请选择套餐类型">
                            <a-select-option v-for="(item) in this.$sysDictOptions('packType')":key="item.k" :value="item.k">
                                {{ item.v }}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                </a-col>
            </a-row>
          <a-row>
              <a-col :span="12">
                  <a-form-model-item label="适用性别" prop="sexType" :rules="$valid.required" :maxLength="50">
                      <a-select v-model="formInfo.sexType" placeholder="请选择适用性别">
                          <a-select-option v-for="(item) in this.$sysDictOptions('suitSex')":key="item.k" :value="item.k">
                              {{ item.v }}
                          </a-select-option>
                      </a-select>
                  </a-form-model-item>
              </a-col>
              <a-col :span="12">
                  <a-form-model-item label="筛选条件" prop="packQuerys" :rules="$valid.required" :maxLength="50">
                      <a-select v-model="formInfo.packQuerys" placeholder="请选择筛选条件">
                          <a-select-option v-for="(item) in this.$sysDictOptions('packQuerys')":key="item.k" :value="item.k">
                              {{ item.v }}
                          </a-select-option>
                      </a-select>
                  </a-form-model-item>
              </a-col>
          </a-row>
          <a-row>

              <a-col :span="12">
                  <a-form-model-item label="执行院区" prop="brunchId" :rules="$valid.required" :maxLength="50">
                      <a-select v-model="formInfo.brunchId" placeholder="请选择院区">
                          <a-select-option value="0">院区通用</a-select-option>
                          <a-select-option v-for="(item) in this.arealist" :key="item.id" :value="item.id">
                              {{item.area_name}}
                          </a-select-option>
                      </a-select>
                  </a-form-model-item>
              </a-col>
          </a-row>
          <a-row>
              <a-col :span="11">
                      <a-table
                              :columns="columns"
                              :data-source="datalist"
                              rowKey="id"
                              size="middle"
                              :pagination="{ pageSize: 15 }"
                              :rowSelection="{selectedRowKeys:lselectedRowKeys,onChange:rowChange}"
                              :scroll="{ y: 550 }">
                <span slot="range" slot-scope="text, record">

                </span>
                  </a-table>
              </a-col>
              <a-col :span="2">
                  <div style="margin-top: 20%;text-align: center">
                      <a-button @click="turnRight" type="primary" icon="double-right" ></a-button>
                  </div>
                  <div style="margin-top: 20px;text-align: center">
                      <a-button @click="turnLeft" type="primary" icon="double-left" ></a-button>
                  </div>
              </a-col>
              <a-col :span="11">
                  <a-table
                          row-key="index"
                          size="small"
                          rowKey="itemId"
                          :columns="columns2"
                          :dataSource="selectList"
                          :rowSelection="{selectedRowKeys:rselectedRowKeys,onChange:rowChange1}"
                  >
                <span slot="exePriceslot" slot-scope="text, record">
                        <a-input v-model="record.exePrice" @change="stprice"></a-input>
                </span>
                  </a-table>
              </a-col>
          </a-row>
               <!-- <a-row>
              <a-col :span="12">
            <a-form-model-item label="编码" prop="packageCode" :rules="$valid.required" :maxLength="50">
              <a-input v-model="formInfo.packageCode" placeholder="请输入编码"/>
            </a-form-model-item>
          </a-col>
                  <a-col :span="12">
            <a-form-model-item label="标签" prop="filterType" :rules="$valid.required" :maxLength="50">
              <a-input v-model="formInfo.filterType" placeholder="请输入标签"/>
            </a-form-model-item>
          </a-col>
            </a-row>-->
                <a-row style="margin-top: 10px">
              <a-col :span="12">
            <a-form-model-item label="套餐项目总价" prop="upay"  :maxLength="50">
              <a-input v-model="formInfo.upay" placeholder="请输入套餐项目总价"/>
            </a-form-model-item>
          </a-col>
                  <a-col :span="12">
            <a-form-model-item label="执行价格" prop="exePrice" :rules="$valid.required" :maxLength="50">
              <a-input v-model="formInfo.exePrice" placeholder="请输入套餐价格"/>
            </a-form-model-item>
          </a-col>
            </a-row>

                <a-row>
              <a-col :span="12">
            <a-form-model-item label="是否可用" prop="state" :rules="$valid.required" :maxLength="50">
                <a-select
                        v-model="formInfo.state"
                        placeholder="请选择是否可用"
                >
                    <a-select-option
                            v-for="(item) in this.$sysDictOptions('whetherFlag')"
                            :key="item.k"
                            :value="parseInt(item.k)">
                        {{ item.v }}
                    </a-select-option>
                </a-select>
            </a-form-model-item>
          </a-col>
                  <a-col :span="12">
            <a-form-model-item label="销量" prop="salenum"  :maxLength="50">
              <a-input v-model="formInfo.salenum" placeholder="请输入销量"/>
            </a-form-model-item>
          </a-col>
            </a-row>

          <a-row>
              <a-col :span="12">
                  <a-form-model-item label="图片" prop="picurl" :rules="$valid.required" :maxLength="50">
                      <w-image-upload
                              class="avatar-uploader"
                              text="上传"
                              :multipleFlag="false"
                              :file-max-size="1"
                              v-model="formInfo.picurl"
                              bizPath="companyPic"></w-image-upload>
                  </a-form-model-item>
              </a-col>
          </a-row>
          <a-row>
              <a-col :span="24">
                  <a-form-model-item label="套餐简介" prop="content"  :labelCol="$global.labelTextAreaCol"  :wrapperCol="$global.wrapperTextAreaCol">
                      <a-input v-model="formInfo.content" placeholder="请输入套餐简介" type="textarea"/>
                  </a-form-model-item>
              </a-col>
          </a-row>
          <a-row>
              <a-col :span="24">
                  <a-form-model-item label="注意事项" prop="attention"  :labelCol="$global.labelTextAreaCol"  :wrapperCol="$global.wrapperTextAreaCol">
                      <a-input v-model="formInfo.attention" placeholder="请输入注意事项" type="textarea"/>
                  </a-form-model-item>
              </a-col>
          </a-row>

      </a-form-model>
    </a-spin>
    <div class="drawer-bootom-button">
      <a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
    </div>
  </a-modal>
</template>

<script>
  import { getAction, postAction } from '@/api/manage'
  import {getArealist} from "@/api/api";
  import WImageUpload from '../../../components/WxImageUpload/WImageUpload'
  export default {
    name: 'HealthPackageEdit',
    components: {
        WImageUpload
    },
    data () {
      return {
        visible: false,
        confirmLoading: false,
          arealist:[],
          datalist:[],
          selectList:[],
        formInfo: {
          packageName: undefined,
          picurl: undefined,
          content: undefined,
          attention: undefined,
          packageCode: undefined,
          filterType: undefined,
          upay: undefined,
          exePrice: undefined,
          sexType: undefined,
          brunchId: undefined,
          state: undefined,
          salenum: undefined,
          createTime: undefined,
          departCode: undefined,
          remark: undefined,
          packType: undefined,
          wx: ''
        },
          lselectedRowKeys: [],
          rselectedRowKeys:[],
          parames:{},
          columns:[
              {
                  title: '项目名称',
                  dataIndex: 'itemName'
              },
              {
                  title: '项目原价',
                  dataIndex: 'fullPrice'
              },
          ],
          columns2:[ {
              title: '项目名称',
              dataIndex: 'itemName'
          },
              {
                  title: '项目原价',
                  dataIndex: 'fullPrice'
              },{
                  title: '执行价格',
                  dataIndex: 'exePrice',
                  scopedSlots: { customRender: 'exePriceslot' }
              },],
        drawerWidth: 800,
        url: {
          saveInfo: '/system/healthPackage/save',
          getInfo: '/system/healthPackage/info',
            getOrderList:'/system/healthPackItem/orderlist',
            getPackItemList:'/system/healthPackItem/list'
        }
      }
    },
    created () {
    },
    methods: {
      add () {
        this.edit()
      },
      edit (record) {
        this.$objToOverride(this.formInfo, record)
        if (this.formInfo.id) {
          getAction(this.url.getInfo, { 'id': record.id }).then(res => {
            this.$nextTick(() => {
              this.formInfo = res.result.data
            })
          })
        }
        this.getAreaList()
          this.getOrderItemList()
          this.getPackItemList()
        this.visible = true
      },
      // 确定
      handleSubmit () {
        // 触发表单验证
        this.confirmLoading = true
        this.$refs.ruleForm.validate(valid => {
          console.log(valid)
          if (valid) {
              const repObj = JSON.parse(this.selectList)
              this.formInfo.itemList = repObj
            postAction(this.url.saveInfo, this.formInfo).then(res => {
              this.$message.success(res.content)
              this.$emit('ok', this.formInfo)
              this.close()
            }).finally(() => {
              this.confirmLoading = false
            })
          } else {
            this.confirmLoading = false
          }
        })
      },
        getOrderItemList(){
          this.parames.pageSize=5000
            this.parames.pageNo=1
            this.parames.isEnable=1
            if(this.formInfo.id){
                this.parames.packId=this.formInfo.id
            }
            postAction(this.url.getOrderList, this.parames)
                .then(res => {
                    console.log(res)
                    this.datalist = res.result.data.records
                })
        },
        getPackItemList(){
            if(this.formInfo.id){
                let parameQuery;
                parameQuery.pageSize=5000
                parameQuery.pageNo=1
                parameQuery.packId=this.formInfo.id
                postAction(this.url.getOrderList, parameQuery)
                    .then(res => {
                        console.log(res)
                        this.datalist = res.result.data.records
                    })
            }
        },
      // 关闭
      handleCancel () {
        this.close()
      },
      close () {
        this.$refs.ruleForm.resetFields()
        this.$objToReset(this.formInfo)
        this.$emit('close')
        this.visible = false
      },
      editorOk (val) {
        this.formInfo.content = val
      },
        getAreaList(){
            getArealist({ }).then((res) => {
                const data = res.result.data
                this.arealist = data
            })
        },
        rowChange(selectedRowKeys, selectedRows){
            //selectedRowKeys,指定选中项的 key 数组(根据这个实现批量删除)
            this.lselectedRowKeys = selectedRowKeys;

        },
        rowChange1(selectedRowKeys, selectedRows){
            //selectedRowKeys,指定选中项的 key 数组(根据这个实现批量删除)
            this.rselectedRowKeys = selectedRowKeys;
            console.log(`selectedRowKeys: ${this.lselectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        turnRight(){
            console.log('selectedRowKeys: ',this.lselectedRowKeys);
            for (var i = 0; i < this.lselectedRowKeys.length; i++) {
                this.datalist.forEach(v => {
                    if (this.lselectedRowKeys[i] === v.id) {
                        let items = ''
                        for (const re of this.selectList) {
                            items += re.itemId + ','
                        }
                        if (items.includes(v.id)) {

                        } else {
                            const mp = {
                                itemId: v.id,
                                itemName: v.itemName,
                                fullPrice:v.fullPrice,
                                exePrice:v.fullPrice
                            }
                            this.selectList.push(mp)
                        }
                        this.datalist.splice(this.datalist.indexOf(v), 1)
                    }
                })
            }
            this.stprice()
        },
        turnLeft(){
            for (var i = 0; i < this.rselectedRowKeys.length; i++) {
                this.selectList.forEach(v => {
                    if (this.rselectedRowKeys[i] === v.itemId) {
                        const mp = {
                            id: v.itemId,
                            itemName: v.itemName,
                            fullPrice:v.fullPrice,
                            exePrice:v.fullPrice
                        }
                        this.datalist.push(mp)
                        this.selectList.splice(this.selectList.indexOf(v), 1)
                    }
                })
            }
            this.stprice()
        },
        stprice(){
            this.formInfo.upay=0
            this.formInfo.exePrice = 0
            this.selectList.forEach(v => {
                this.formInfo.upay+=v.fullPrice*1.0
                this.formInfo.exePrice+=v.exePrice*1.0
            })
        }
    }
  }
</script>
